<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商家登录界面</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.0.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- 注意一下引入顺序 -->
<script src="js/jquery-2.0.3.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript">
	function changeYZM() {
		//获取图片，修改图片的地址
		$("#YZM").attr("src", "random.jpg?time=" + new Date().toLocaleString());
	}
</script>
</head>
<body>
	<header>
		<nav class="b_clear">
			<div class="nav_logo l_float">
				<img src="imgs/logo3.jpg" alt="" style="width: 60px; height: 60px;">
			</div>
			<div class="nav_link r_float">
				<ul>
					<li><a href="#">关于我们</a></li>
				</ul>
			</div>
		</nav>
	</header>
	<div class="container">
		<div class="login_body l_clear">
			<div class="login_form l_float">
				<div class="login_top">


					<div class="login_tags b_clear">
						<span class="top_tag l_float active" onClick="PwdLogin()">账号登录</span>
						<span class="top_tag r_float" onClick="QrcodeLogin()">手机登录</span>
					</div>
				</div>
				<div class="login_con">
					<form action="ShopLoginServlet" method="POST">
						<div>
							<label for="user_name">用户名</label> <input type="text"
								name="shopname" id="shopname" placeholder="请输入账号" required>
							<img src="imgs/icons/user.svg">
							<p class="tips hidden">请检查您的账号</p>
						</div>
						<div>
							<label for="user_pwd">密码</label> <input type="password"
								name="shoppsw" id="shoppsw" placeholder="请输入密码" required>
							<img src="imgs/icons/lock.svg">
							<p class="tips hidden">请检查您的密码</p>
						</div>
						<div class="b_clear">
							<label for="auth_code" class="b_clear">验证码</label> <input
								type="text" name="YZM" id="" placeholder="请输入验证码"
								class="l_float" maxlength="6"> <img src="random.jpg"
								id="YZM" onclick="changeYZM()"
								style="margin-left: 150px; width: 100px;"100px;">
						</div>
						<!-- 隐藏域传递op的值给servlet，会根据op的值判断后续的操作 -->
						<input type="hidden" name="op" value="shop_login">
						<p>
							<input type="checkbox" value="rememberme" name="cksremember"
								id="cksremember" checked>记住密码
						</p>
						<div class="b_clear submit" style="text-align: center">
							<button type="submit">登&nbsp;&nbsp;录</button>
							<p class="tips hidden">登录失败，请检查您的账户与密码</p>
						</div>
					</form>
				</div>
				<div class="login_con hidden">
					<form action="ShopLoginServlet" method="POST">
						<div>
							<label for="user_name">手机号码</label> <input type="text"
								name="shopphone" id="shopphone" pattern="[0-9]{11}"
								placeholder="请输入手机号码" required><span
						id="phonemsg"></span><img
								src="imgs/icons/user.svg">
							<p class="tips hidden">请检查您的手机号码</p>
						</div>
						<div class="b_clear">
							<label for="auth_code" class="b_clear">手机校验码</label> <input
								type="text" name="scode" id="scode" pattern="[0-9]{6}"
								placeholder="请输入校验码" class="l_float" maxlength="6"> 
								<input id="btnSendCode1" type="button" class="btn btn-default"
								value="获取验证码" onClick="sendMessage1()" /><span id="codemsg"></span>
						</div>
						<!-- 隐藏域传递op的值给servlet，会根据op的值判断后续的操作 -->
						<input type="hidden" name="op" value="ajaxSendmsg">
						<div class="b_clear submit" style="text-align: center">
							<button type="submit">登&nbsp;&nbsp;录</button>
							<p class="tips hidden">登录失败，请检查您的手机号与校验码</p>
						</div>
					</form>
				</div>
				<div class="login_otherAccount">
					<span>第三方登录</span> <a href="http://"><img
						src="imgs/icons/wechat.svg" alt="微信登录"></a> <a href="http://"><img
						src="imgs/icons/weibo.svg" alt="微博登录"></a> <a href=""><img
						src="imgs/icons/qq.svg" alt="QQ登录"></a>
				</div>

			</div>
			<div class="login_ad l_float" style="border: 0px;">
				<a href=""></a>
			</div>
		</div>
		<div class="footer">
			<p>
				Copyright © 2020 <a href="#">与食俱进</a>
			</p>
			<!-- <a href="http://www.beian.gov.cn/" target="_blank"><img src="imgs/icons/national_emblem.svg" alt="公安部备案">蒙公网安备15020302000160号</a> -->

		</div>
	</div>
	<script type="text/javascript" src="js/duanxin.js"></script>
	<script>
		$(function() {
			//("#shopname").blur 文本框失去焦点事件
			$("#shopname").blur(function() {
				//读取用户名和密码的cookie信息
				var shopname = $.cookie('shopname');
				var shoppsw = $.cookie('shoppsw');

				//console.log(shoppsw);
				//如果用户输入的用户名 和 读取用户名一致
				if ($(this).val() == shopname) {
					//将密码显示在密码框中
					$("#shoppsw").val(shoppsw);
				}

			});

		})
		
		// 手机号正则
		var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
		var count = 60; // 间隔函数，1秒执行
		var curCount1;// 当前剩余秒数
		// 按钮发送短信的事件
		function sendMessage1() {
			curCount1 = count;
			var phone = $.trim($('#shopphone').val());
			if (!phoneReg.test(phone)) {
				alert(" 请输入有效的手机号码");
				return false;
			}
			// 设置button效果，开始计时
			$("#btnSendCode1").attr("disabled", "true");
			$("#btnSendCode1").val(+curCount1 + "秒后再获取");
			InterValObj1 = window.setInterval(SetRemainTime1, 1000); // 启动计时器，1秒执行一次
			// 向后台发送处理数据
			ajaxCode();
			// 隐藏提示框
			$("#trcode").css("display", "none");
		}

		// 发送并获取验证码
		function ajaxCode() {
			$.ajax({
				// key:value
				url : "ShopLoginServlet",
				type : "post",
				data : {
					shopphone : $("#shopphone").val(),
					op : "ajaxSendmsg"
				},
				success : function(data) {
					scode = data;
				},
				dataType : "json"
			});
		}

		// 计时器
		function SetRemainTime1() {
			if (curCount1 == 0) {
				window.clearInterval(InterValObj1);// 停止计时器
				$("#btnSendCode1").removeAttr("disabled");// 启用按钮
				$("#btnSendCode1").val("重新发送");
			} else {
				curCount1--;
				$("#btnSendCode1").val(+curCount1 + "秒后再获取");
			}
		}
		
		
	</script>
	<script src="js/login.js"></script>
</body>
</html>